<template>
  <el-row class="setting-user-permissions-page">
    <breadcrumb :titleArr="titleArr" @back="breadcrumbBack" class="bread-crumb"></breadcrumb>
    <el-row id="apassMicroSettingUserPermissions" class="page-container mp-micro" />
  </el-row>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { loadMicroApp } from 'qiankun'
import { CommonModule } from '@/store/modules/common'
import breadcrumb from '@/components/breadcrumb/breadcrumb.vue'
// import { TemplateModule } from '@/store/modules/config/template'
// import { SheetSummaryModule } from '@/store/modules/microAppStore/sheetSummary'
@Component({
  name: 'settingUserPermissions',
  components: { breadcrumb }
})

export default class SettingUserPermissions extends Vue {
  // #region 基础数据
  private $message: any
  private $router: any
  private microApp: any
  private $store: any
  private titleArr: any[] = ['模板设置', '角色权限设置']
  // #endregion
  private saveRoleFun (data) { // mopower的角色保存的时候请求参数同步给V7后端 =》 (工单模板的列表的权限控制)
    CommonModule.publicAction({ url: '/crm/action/template/addPermission', method: 'POST', data })
  }

  // #region 子应用注册函数
  private initMicroApp () {
    CommonModule.getMpInfo({ url: '/auth/get/mp/relation', method: 'POST', data: {} }).then(() => {
      const activeRule = '/setting_center/index/customer_template_setting/settingUserPermissions'
      this.microApp = loadMicroApp(
        {
          name: 'apass-micro-settingUserPermissions',
          entry: `${(CommonModule.initConfig as any).platformConfig.mopowerUrl}/roleList.html`,
          container: '#apassMicroSettingUserPermissions',
          props: {
            routerBase: activeRule,
            store: {
              applicationId: this.$store.state.common.mpInfo.mpApplicationId,
              saveRole: (data: any) => { // mopower的角色保存的时候请求参数同步给V7后端 =》 (工单模板的列表的权限控制)
                this.saveRoleFun(data)
              }
            },
            user: {
              id: this.$store.state.common.mpInfo.mpUserId,
              companyId: this.$store.state.common.mpInfo.mpCompanyId
            }
          }
        },
        {
          sandbox: {
            // experimentalStyleIsolation: true
          }
        }
      )
    })
  }

  private unmountMicroApp () {
    // console.log('this.microApp:\n', this.microApp)
    if (this.microApp) {
      this.microApp.mountPromise.then(() => {
        if (this.microApp.getStatus() === 'MOUNTED') {
          this.microApp.unmount()
        }
      })
    }
  }

  private breadcrumbBack (v) {
    this.$router.push('/setting_center/index/customer_template_setting/setting') // 直接跳回模板配置页面
  }
  // #endregion

  // #region 生命周期钩子
  public activated () {
    this.$nextTick(() => {
      this.initMicroApp()
    })
  }

  private deactivated () {
    this.unmountMicroApp()
    this.$destroy()
  }
  // #endregion
}
</script>

<style lang="stylus">
#apassMicroSettingUserPermissions>div
  height -webkit-fill-available
#apassMicroSettingUserPermissions >>> .sheet1
  border-radius 10px
  padding 0 10px
</style>

<style lang="stylus" scoped>
  .setting-user-permissions-page
    width 100%
    height 100%
    border 1px solid #DCE8F1
    box-shadow 0px 0px 4px 0px #E0E6F0, 0px 1px 4px 0px #E0E6F0
    border-radius 10px
    overflow auto
    // padding 16px
    .bread-crumb
      // margin 10px 0 20px 0
    .page-container
      height calc(100% - 56px)
      // padding 0 10px
      border-radius 10px
      background #f5f7fa url('../../../assets/img/loading.gif') no-repeat center center
      background-size 1.2 1.2
      // box-shadow 0px 0px 4px 0px #E0E6F0, 0px 1px 4px 0px #E0E6F0
</style>
